<template>
  <div class="container">
    <el-form
      :inline="true"
      :model="partnerform1"
      class="demo-form-inline"
    >
      <el-form-item label="人员搜索">
        <el-input v-model="partnerform1.name" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select
              v-model="partnerform1.isRepair"
              placeholder="请选择"
            >
              <el-option
                v-for="item in usertypelist"
                :key="item.roleId"
                :value="item.roleId"
                :label="item.roleName"
              ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="app-container">
      <el-table :data="worklist"  v-loading="loading">
        <!-- 放置列 -->
        <el-table-column
          prop="index"
          align="center"
          width="100px"
          label="序号"
        />
        <el-table-column prop="userName" align="center" label="人员名称" />
        <el-table-column  prop="roleName" align="center" label="角色" />
        <el-table-column prop="mobile" align="center" label="联系电话" />
        <el-table-column prop="workCount" align="center" label="完成工单（本月）" />
        <el-table-column prop="progressTotal" align="center" label="进行中工单" />
        <el-table-column prop="cancelCount" align="center" label="拒绝工单（本月）" />
        <el-table-column align="center" width="130px" label="操作">
          <!-- 放置操作按钮 -->
          <template v-slot="{ row }">
            <el-button
              size="mini"
              type="text"
              @click="workDetail(row.userId)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
      <el-row
       v-if="this.totalpage>1"
        type="flex"
        style="height: 60px"
        align="middle"
        justify="space-between"
      >
        <el-col :span="12"
          ><span style="font-size: 13px; color: #999; padding-left: 12px"
            >共{{ totalcount }}条记录 第{{ pageParams.pageIndex }}/{{
              totalpage
            }}页</span
          ></el-col
        >
        <el-col :push="12">
          <el-button-group>
            <el-button
              type="primary"
              @click="innPage"
              size="mini"
              :disabled="pageParams.pageIndex == 1"
              icon="el-icon-arrow-left"
              style="
                background-color: #d5ddf8;
                color: #000;
                margin-right: 12px;
                border: none;
              "
              >上一页</el-button
            >
            <el-button
              type="primary"
              @click="addPage"
              size="mini"
              :disabled="pageParams.pageIndex == this.totalpage"
              style="background-color: #d5ddf8; color: #000; border: none"
              >下一页<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>
    <!-- //人员详情的dialog -->
    <el-dialog 
    title="人员详情"
    :visible="dialogFormVisible"
    @close="dialogFormVisible=false">
<div class="header" >
  <span class="single">人员名称：{{workuserinfo.userName}}</span>
  <span class="single">角色: {{workuserinfo.roleName}}</span>
  <span class="single">联系电话: {{workuserinfo.mobile}}</span>
  <span class="single" style="margin-top:10px">负责区域: {{workuserinfo.regionName}}</span>
</div>
<table>
  <tr>
    <td></td>
    <td>总工单数</td>
    <td>拒绝工单</td>
    <td>完成工单</td>
    <td>进行中工单</td>
  </tr>
  <tr>
    <td>本周</td>
    <td>{{worknuminfo1.total}}</td>
    <td>{{worknuminfo1.cancelCount}}</td>
    <td>{{worknuminfo1.workCount}}</td>
    <td>{{worknuminfo1.progressTotal}}</td>
  </tr>
   <tr>
    <td>本月</td>
   <td>{{worknuminfo2.total}}</td>
    <td>{{worknuminfo2.cancelCount}}</td>
    <td>{{worknuminfo2.workCount}}</td>
    <td>{{worknuminfo2.progressTotal}}</td>
  </tr>
   <tr>
    <td>本年</td>
    <td>{{worknuminfo3.total}}</td>
    <td>{{worknuminfo3.cancelCount}}</td>
    <td>{{worknuminfo3.workCount}}</td>
    <td>{{worknuminfo3.progressTotal}}</td>
  </tr>
</table>
    </el-dialog>
  </div>
</template>
<script>
import {
  getWorkList,
  workDetail,
  taskNumDetail
} from "@/api/user";
export default {
  name: "Work",
  data() {
    return {
      loading:false,
      dialogFormVisible: false,
      totalcount: "",
      totalpage: "",
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      partnerform1: {
        name: "",
        isRepair: null,
      },
      workuserinfo: {},
      worknuminfo1: {},
      worknuminfo2: {},
      worknuminfo3: {},
      worklist: [],
      usertypelist:[
        {roleId:false,roleName:'运营人员'},
        {roleId:true,roleName:'运维人员'},
      ]
    };
  },
  async created() {
  this.getWorkList()
  },
  methods: {
   async workDetail(userId){
    this.loading=true
    const start1= this.$moment().startOf('isoWeek').format('YYYY-MM-DD 00:00:00');
    const end1= this.$moment().format('YYYY-MM-DD 23:59:59');
    const start2= this.$moment().format('YYYY-MM-01 00:00:00');
    const end2= this.$moment().format('YYYY-MM-DD 23:59:59');
    const start3= this.$moment().format('YYYY-01-01 00:00:00');
    const end3= this.$moment().format('YYYY-MM-DD 23:59:59');
  this.workuserinfo = await workDetail(userId)
  this.worknuminfo1 = await taskNumDetail(userId,start1,end1)
  this.worknuminfo2 = await taskNumDetail(userId,start2,end2)
  this.worknuminfo3 = await taskNumDetail(userId,start3,end3)
  // console.log(this.workuserinfo);
  // console.log(this.worknuminfo1);
  // console.log(this.worknuminfo2);
  // console.log(this.worknuminfo3);
  this.loading=false
  this.dialogFormVisible=true
    },
    //下一页
    addPage() {
      this.pageParams.pageIndex++;
      this.getWorkList();
    },
    // 上一页
    innPage() {
      this.pageParams.pageIndex--;
      this.getWorkList();
    },
    async getWorkList() {
      const res = await getWorkList(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        this.partnerform1.name,
        this.partnerform1.isRepair
      );
      this.worklist = res.currentPageRecords;
      this.totalpage = res.totalPage;
      this.totalcount = res.totalCount;
      this.worklist.forEach((item, index) => {
        this.$set(
          item,
          "index",
          this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + index + 1
        );
      });
    },
    search() {
      this.getWorkList();
    },
    closefn() {
      this.dialogFormVisible = false
    },
  },
};
</script>

<style lang="scss" scoped>
.role-operate {
  padding: 10px;
}
::v-deep .el-dialog {
  border-radius: 10px;
  padding: 20px;
  width: 50%;
  .area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .title {
    width: 50%;
    margin-bottom: 20px;
    .right {
      width: 80%;
      margin-left: 10px;
      .el-table {
        margin-top: -15px;
      }
    }
  }
}
.header {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  font-size: 14px;
  color:#666;
  background-color: #f3f6fb;
  .single{
    width: 33%;
  }
}
 table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  }
 td {
    width: 20%;
    height: 40px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ccc;
  }
</style>
